﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles{
   <style>
    .uploader-list .info {
        position: relative;
        margin-top: -25px;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        height: 25px;
        text-align: center;
        display: none;
    }

    .uploader-list .handle {
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 500px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

        .uploader-list .handle i {
            margin-right: 5px;
        }

        .uploader-list .handle i:hover {
            cursor: pointer;
        }

        .uploader-list {
            display: flex;
            vertical-align: central;
        }

        .uploader-list .file-iteme {
            display: flex;
            padding: 5px;
        }
    </style>
}
<div class="layui-card">
    <div class="layui-card-body layui-row layui-col-space10">
        <form class="layui-form" lay-filter="banner-form" style="padding: 15px 0 0 0;">
            <input type="hidden" name="Id" value="@Model.Id" />
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="Title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" value="@Model.Title">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">分类</label>
                <div class="layui-input-block">
                    <select name="BType" lay-verify="required">
                        <option value="">请选择分类</option>
                        @if (ViewBag.BannerTypeList != null)
                        {
                            foreach (var item in ViewBag.BannerTypeList)
                            {
                                <option value="@item.Dvalue" @(item.Dvalue == Model.BType ? "selected" : "")>@(item.Dname)</option>
                            }
                        }
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" id="Taxis" name="Taxis" placeholder="请输入排序"
                           autocomplete="off" class="layui-input" value="@Model.Taxis" min="0" max="99" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">超连接</label>
                <div class="layui-input-block">
                    <input type="text" id="Bhref" name="Bhref" placeholder="请输入超连接"
                           autocomplete="off" class="layui-input" value="@Model.Bhref" maxlength="100" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="pear-btn pear-btn-md" id="multiplepic"><i class="icon pear-icon pear-icon-upload"></i>图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list uploader-list" id="uploader-list">
                                @if (Model.UrlPath != null)
                                {
                                    <div id="0" class="file-iteme zoomImgBox">
                                        <div class="handle"><i class="layui-icon layui-icon-delete"></i></div>
                                        <img style="width: 700px; height: 300px; border: none;" src="@Model.UrlPath" />
                                        <div class="info"></div>
                                    </div>
                                }
                            </div>
                        </blockquote>
                        <input type="hidden" value="@Model.UrlPath" name="UrlPath" id="UrlPath" />
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-hide" lay-submit lay-filter="banner-submit" id="banner-submit">提交</button>
                </div>
            </div>
        </form>
    </div>
    </div>

    @section scripts{
        <script>

            layui.use(['form', 'lscom', 'upload','preview'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let upload = layui.upload;
            let lscom = layui.lscom;
            let preview  =layui.preview;

            var index = parent.layer.getFrameIndex(window.name);
             preview.render({
            model:"text",
            domName:'#uploader-list'
            });
            window.submitForm = function () {
                $("#banner-submit").click();
            }
                //多图片上传
            upload.render({
                elem: '#multiplepic'
                , url: '/Upload/UploadFile?category=banner' //此处配置你自己的上传接口即可
                , multiple: false
                , accept: 'images'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    //obj.preview(function (index, file, result) {
                    //    $('#multiplelist').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    //});
                }
                , done: function (res) {
                    //上传完毕
                    $('#uploader-list').empty();
                    $('#uploader-list').append(
                        '<div id="' + res.data.id + '" class="file-iteme zoomImgBox">' +
                        '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                        '<img style="width: 700px;height: 300px;border:none;" src=' + res.data.url + '>' +
                        '<div class="info">' + res.data.filename + '</div>' +
                        '</div>'
                    );
                    $('#UrlPath').val(res.data.url);
                }
            });
             preview.render({
            model:"img",
            domName:'.zoomImg'
            });
            form.on('submit(banner-submit)', function (data) {
                var field = data.field;
                var waitIndex = parent.layer.load(2);
                lscom.ajax({
                    url: "/Cms/Banner/SaveData",
                    data: JSON.stringify(field),
                    lsHandleError: false
                }).done(function (data) {
                    if (data.code == 0) {
                        data.index = index;
                        let parentWindow = parent.selectedWindow().window;
                        parentWindow.saveCallback(data);
                    }
                }).fail(function (message) {
                    lscom.notify.error(message);
                }).always(function () {
                    parent.layer.close(waitIndex);
                });

                return false;
            });
        });
        </script>
    }

